<template>
    <div class="company-info">
        <h1>认证信息</h1>
        <div class="info-card">
            <div class="info-item">
                <label>企业名称</label>
                <span>{{ obj.name }}</span>
            </div>
            <div class="info-item">
                <label>法定代表人姓名</label>
                <span>{{ obj.legalPersonName }}</span>
            </div>
            <div class="info-item">
                <label>统一社会信用代码</label>
                <span>{{ obj.idNumber }}</span>
            </div>
            <div class="info-item">
                <label>身份证号</label>
                <span>{{ obj.legalPersonIdCardNo }}</span>
            </div>
            <div class="info-item">
                <label>营业执照</label>
                <image-preview :src="obj.businessLicense" alt="营业执照" class="license-image" />
            </div>
        </div>
    </div>
</template>

<script>
import { getInformation } from '@/api/information/information';

export default {
    name: 'authenticationinfo',
    props: {
        id: {
            type: Number,
            require: true
        }
    },
    data() {
        return {
            obj: {},
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            getInformation(this.id).then(response => {
                this.obj = response.data;
            });
        }
    },
};
</script>

<style scoped>
.company-info {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-card {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.info-item label {
    font-weight: bold;
    color: #333;
}

.info-item span {
    color: #666;
}

.license-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
</style>